<template>
	<w-container id="container">
		<!-- 自定义导航 -->
		<w-navbar id="navbarStyle"></w-navbar>
		<!-- <w-image :src="logo" width="203" height="203" style="margin: 0 auto;"></w-image> -->
		<!-- 中心区域 -->
		<view class="login_center">
			<view class="title">
				<view class="font-size-18 font-color-dark font-w-600">请输入验证码</view>
				<view class="hint">已发送至+86 {{ mobile }}</view>
			</view>
			<view class="flex flex-ai-center ">
				<w-icon name="login_code" size="20"></w-icon>
				<text class="font-color-textPrimary font-size-16 font-w-500 ml-5">验证码</text>
			</view>
			<view class="iptStyle mt-10">
				<u-input v-model="code" :customStyle="iptStyle" clearable placeholder="请输入验证码" maxlength="6"
					border="bottom" fontSize="14" color="#000">
					<template slot="suffix">
						<u-code ref="uCode" @change="tips=$event" @start="isSend=false" @end="isSend=true" :seconds="60"
							changeText="(重新发送 Xs)" :keepRunning="true" uniqueKey="verification"></u-code>
						<view @tap="verify"
							:class="`font-size-12 ${isSend?'font-color-subtitle':'font-color-placeholder'}`">{{ tips }}
						</view>
					</template>
				</u-input>
			</view>
			<w-button class="login_btn" type="colorful" shape="circle" @click="nextStep">下一步</w-button>
		</view>
		<!-- 底部协议 -->
		<view class="agreement">

		</view>

		<w-jy-verify ref="captcha" v-if="captchaStatus" @success='sendCode' @load='verify'></w-jy-verify>
	</w-container>
</template>

<script>
	import {
		sendSms,
		register
	} from '@/api/user/index.js';
	import {
		mapState
	} from 'vuex'
	import {
		getConfig
	} from '@/api/common/index.js'
	export default {
		data() {
			return {
				iptStyle: { //  输入框样式
					'height': '80rpx',
					'padding': '0'
				},
				code: '',
				mobile: '',
				isSend: true, //  验证码状态
				tips: '获取验证码', //  验证码
			};
		},
		computed: {
			...mapState('config', {
				captchaStatus(state) {
					return !!Number(state.info.puzzleCaptcha)
				},
				logo(state) {
					return state.info.appLogo
				},
			})
		},

		onLoad(e) {
			this.mobile = e.mobile || '';
		},
		mounted() {
			if (this.$refs.uCode.canGetCode) {
				if (!this.captchaStatus) {
					this.sendCode()
				}
			}
		},
		methods: {
			verify() {
				if (this.$refs.uCode.canGetCode) {
					this.$nextTick(() => {
						if (this.captchaStatus) {
							this.$refs.captcha.showCaptcha();
						} else {
							this.sendCode();
						}
					})
				}
			},
			sendCode(validate) {
				if (this.captchaStatus && (!validate)) return;
				if (!this.mobile) {
					uni.navigateBack()
					return
				}
				if (this.$refs.uCode.canGetCode) {
					this.isSend = true
					uni.showLoading()
					sendSms({
						mobile: this.mobile,
						event: "resetpwd",
						...validate
					}).then(res => {
						this.$refs.uCode.start();
						uni.hideLoading();
					}).catch(() => {
						uni.hideLoading();
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			nextStep() {
				if (!this.code) {
					uni.$u.toast('请输入验证码');
					return
				}
				uni.$u.route('/pages/login/setPwd', {
					mobile: this.mobile,
					code: this.code
				});
			}
		}
	}
</script>

<style lang="scss">
	#container {
		// background-image: url($IMG_URL + '/static/bg/loginbg.png');
		background-color: #fff;
		background-size: 100% auto;
		@extend .flex, .flex-dir-col;
		background-repeat: no-repeat;
	}

	#navbarStyle /deep/ .u-navbar__content {
		// background-image: url($IMG_URL + '/static/bg/loginbg.png');
		background-position: top;
		background-size: 100% auto;
	}

	.login_center {
		width: 100%;
		background-color: #fff;
		position: absolute;
		bottom: 0;
		height: 90vh;
		border-radius: 60rpx 60rpx 0 0;
		// padding-bottom: 246rpx;
		@extend  .flex-1, .pt-26, .plr-40;

		>.title {
			width: 100%;
			text-align: center;
			margin-bottom: 284rpx;

			>.hint {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				@extend .font-size-12, .font-color-minor;
			}
		}

		>.iptStyle {
			width: 100%;
			background: rgba(0, 0, 0, 0.06);
			border-radius: 64rpx;
			padding: 0 30rpx;

			.u-border-bottom {
				border-color: transparent !important;
			}
		}

		>.login_btn {
			width: 100%;
			margin-top: 96rpx;
			// box-shadow: 0 20rpx 30rpx rgba(223, 0, 7, .1);
		}

	}

	.agreement {
		width: 100%;
		padding: 0 80rpx 40rpx;
	}
</style>